<template>
  <div class="lightingmonitoring">
    <ul class="title-wrap" @click="updateSelVal">
      <li :class="selVal == 1 ? 'active' : '1'">全局监控</li>
      <li :class="selVal == 2 ? 'active' : '2'">路灯照明</li>
      <li :class="selVal == 3 ? 'active' : '3'">大厅照明</li>
      <li :class="selVal == 4 ? 'active' : '4'">景观灯</li>
      <li :class="selVal == 5 ? 'active' : '5'">房间照明</li>
      <li :class="selVal == 6 ? 'active' : '6'">楼道照明</li>
    </ul>
    <div class="content-wrap">
      <GlobalMonitoring v-if="selVal == 1" />
      <StreetLamp v-if="selVal == 2" />
      <Halllighting v-if="selVal == 3" />
      <Landscapelamp v-if="selVal == 4" />
      <Roomlighting v-if="selVal == 5" />
      <CorridorLamp v-if="selVal == 6" />
    </div>
   
  </div>
</template>
<script lang="ts" setup>
import GlobalMonitoring from "./components/GlobalMonitoring.vue"; /* 1 */
import StreetLamp from "./components/StreetLamp"; /*2  */
import Halllighting from "./components/Halllighting"; /* 3 */
import Landscapelamp from "./components/Landscapelamp"; /* 4 */
import Roomlighting from "./components/Roomlighting"; /* 5 */
// import PowerMonitor from "./components/PowerMonitor";
import CorridorLamp from "./components/CorridorLamp.vue"; /* 6 */
let showDialog = ref(true);
let selVal = ref(2);

let updateSelVal = (e) => {
  if (e.target.classList[0] == "active") return;

  if (
    e.target.classList[0] != "1" &&
    e.target.classList[0] != "2" &&
    e.target.classList[0] != "3" &&
    e.target.classList[0] != "4" &&
    e.target.classList[0] != "5" &&
    e.target.classList[0] != "6" &&
    e.target.classList[0] != "7"
  ) {
    return;
  }

  selVal.value = e.target.classList[0];
};
</script>
<style lang="scss" scoped>
.lightingmonitoring {
  width: 100%;
  height: 100%;

  .title-wrap {
    padding-top: 19px;
    padding-left: 237px;
    padding-right: 259px;
    display: flex;
    justify-content: space-around;
    li {
      background: url("./images/title-bgc.png") no-repeat;
      width: 137px;
      height: 55px;
      background-size: cover;
      font-family: Source Han Sans CN;
      font-weight: 500;
      font-size: 18px;
      color: #ffffff;
      text-align: center;
      line-height: 55px;
      cursor: pointer;
    }
    .active {
      background: url("./images/title-bgc-sel.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>
